<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // diff算法：Vue的diff算法指的是在Vue框架中使用的虚拟DOM diff算法。它是一种通过比较两个虚拟DOM树结构的算法，找出需要进行更新的部分，并尽可能地减少实际的DOM操作，以提高性能。

      // vue实现diff算法
      /*
        1. 同级比较
          考虑到前端页面不太会出现跨层级移动的元素，牺牲一定准确率，减少了比较的次数，O(n3) -> O(n)

        2. key的比较
          在同级的情况下，如果key的值是相同的，那么就直接复用该元素，提高更新的效率

        3. 静态标记
          text -> 1 -> 1
          class -> 2 -> 10
          style -> 4 -> 100
          propsxx -> 8 -> 1000
          xxx -> 16 -> 10000
          11 -> 1011

        4. 静态提升
          将那些不可能变的元素的执行函数，变成一个全局的变量

        5. 缓存事件监听器
          将事件处理函数缓存了起来
      */
    </script>
  </body>
</html>

<!-- 
  时间复杂度: 一个算法一共要经过多少步计算
    冒泡排序 10数字 9 + 8 + 7 + ... + 1 一共45次 O(n²)

  空间复杂度: 一个算法需要占据多少内存

  https://template-explorer.vuejs.org/#eyJzcmMiOiIiLCJvcHRpb25zIjp7ImhvaXN0U3RhdGljIjp0cnVlLCJjYWNoZUhhbmRsZXJzIjp0cnVlfX0=
 -->
